<template>
	<view class="bf" :style="[{width: width,height: height}]">
		<view class="bf-left u-font-xs u-p-l-10 u-p-r-10">
			<block v-if="showLeft"><slot name="left">秒杀</slot></block>
		</view>
		<view class="bf-right u-font-xs u-p-l-10 u-p-r-10">
			<block v-if="showRight"><slot name="right">推荐</slot></block>
		</view>
		<u-image 
		:src="src" 
		:width="width"
		:height="height"
		:lazy-load="lazyLoad"
		:border-radius="borderRadius"
		></u-image>
		<view class="bf-bottom u-font-xs u-p-l-10 u-p-r-10">
			<block v-if="showBottom"><slot name="bottom">新人专享</slot></block>
		</view>
	</view>
</template>

<script>
	export default {
		name:"ListImgItem",
		props:{
			width:{
				type:String,
				default:"100%"
			},
			height:{
				type:String,
				default:"200rpx"
			},
			lazyLoad:{
				type:Boolean,
				default:true
			},
			borderRadius:{
				type:String,
				default:"10rpx"
			},
			src:{
				type:String,
				required:true
			},
			showLeft:{
				type:Boolean,
				default:true
			},
			showRight:{
				type:Boolean,
				default:true
			},
			showBottom:{
				type:Boolean,
				default:true
			},
			
		}
	}
</script>

<style lang="scss" scoped>
.bf{
	position: relative;
	text-align: center;
	&-left{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		background-color: $u-type-primary;
		 color: $u-type-info-light;
		  border-top-left-radius: 10rpx;
	}
	&-right{
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1;
		background-color: $u-type-error;
		 color: $u-type-info-light;
		  border-top-right-radius: 10rpx;
	}
	&-bottom{
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		background-color: $u-type-success;
		 color: $u-type-info-light;
		  border-top-left-radius: 10rpx;
		  border-top-right-radius: 10rpx;
	}
	
}
</style>
